@{
    Layout = @"~/Default/Views/Shared/BootMetroPage.cshtml";
}

@section js
{
    <script type="text/javascript" src="/WebLib/bootmetro/js/demo.js"></script>
    <script type="text/javascript" src="/WebLib/bootmetro/js/holder.js"></script>
}

<header id="hero" class="">
        <div class="jumbotron masthead">
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="inner span5">
                    <h1>BootMetro</h1>
                    <h2>Metro style web framework</h2>
                    <p>Simple and flexible HTML, CSS, and Javascript for web apps that wants to use the "Windows 8 App Store" style, without the need to run on Windows 8.</p>
                    <p>
                    <a class="btn btn-large btn-primary" href="https://github.com/aozora/bootmetro/zipball/master">
                        Download Now
                        <i class="icon-arrow-right-7"></i>
                    </a>
                    <span>it's free</span>
                    <br/>
                    <span class="label label-success">Latest version: 0.6</span>
                    </p>
                </div>
                <div class="span7">
                    <img id="hero-image" class="pull-right" width="500" height="265" src="/WebLib/bootmetro/img/hero4.png" alt="hero">
                </div>
            </div>
        </div>
        </div>
   
</header>
   
<div id="home-tiles" class="container-fluid metro">
    <div class="row-fluid">
        <div class="span4">
        <a class="tile wide imagetext bg-color-orange first" href="https://github.com/aozora/bootmetro">
            <div class="image-wrapper">
                <span class="icon icon-github"/>
            </div>
            <div class="column-text">
                <div class="text-header3">View project on GitHub</div>
            </div>
        </a>
        </div>
        <div class="span4">
        <a class="tile wide imagetext bg-color-green middle" href="./hub.html">
            <div class="image-wrapper">
                <!--<img src="/WebLib/bootmetro/img/metro-tiles.jpg" alt="demo"/>-->
                <span class="icon icon-grid-view"/>
            </div>
            <div class="column-text">
                <div class="text-header3">View the Demo online</div>
            </div>
        </a>
        </div>
        <div class="span4">
        <a class="tile wide imagetext bg-color-blue last" href="https://twitter.com/aozoralabs">
            <div class="image-wrapper">
                <span class="icon icon-twitter"/>
            </div>
            <div class="column-text">
                <div class="text-header3">Follow on Twitter</div>
            </div>
        </a>
        </div>
    </div>
</div>
   
<div class="marketing metro container-fluid">
    <h1>Features</h1>
    <p class="marketing-byline">BootMetro is built on top of <a href="http://twitter.github.com/bootstrap/index.html">Twitter Bootstrap</a> and inspired by the Metro UI CSS by Sergey Pimenov</p>
   
    <div class="row-fluid">
        <div class="span4">
        <h2>Create your Hub</h2>
        <div class="tile wide image">
            <img src="/WebLib/bootmetro/img/detail-hub.png" alt="hub" />
        </div>
        <p>Give more focus to your content. With a Metro style app you give users immediately focus on the primary infos, increasing the usability and reducing the distractions.</p>
        <p>Use the same tile templates as defined for the original Windows 8 MetroUI.</p>
        </div>
        <div class="span4">
        <h2>Actions</h2>
        <div class="tile wide image">
            <img src="/WebLib/bootmetro/img/detail-appbar-1.png" alt="appbar" />
        </div>
        <p>Use the ApplicationBar to show contextual icon action.</p>
        </div>
        <div class="span4">
        <h2>Navigation</h2>
        <div class="tile wide image">
            <img src="/WebLib/bootmetro/img/detail-headermenu.png" alt="headermenu" />
        </div>
        <p>Implement the navigation in pure MetroUI style, use back-button and the header menu to provide simple ways to navigate to other pages.</p>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span4">
        <h2>Charms</h2>
        <div class="tile wide image">
            <img src="/WebLib/bootmetro/img/detail-charms.png" alt="charms" />
        </div>
        <p>Create charms panels to show contextual settings.</p>
        </div>
        <div class="span4">
        <h2>Font Icons</h2>
        <div class="tile wide image">
            <img src="/WebLib/bootmetro/img/detail-icons.png" alt="icons" />
        </div>
        <p>With the awesome <a href="http://keyamoon.com/icomoon">IcoMoon</a> font icon set, you can use hundreds of font icons with any color and any dimension.</p>
        </div>
    </div>
</div>
   
   
   
<div id="charms" class="win-ui-dark">
   
    <div id="theme-charms-section" class="charms-section">
        <div class="charms-header">
        <a href="#" class="close-charms win-command">
            <span class="win-commandimage win-commandring">&#xe05d;</span>
        </a>
        <h2>Settings</h2>
        </div>
   
        <div class="row-fluid">
        <div class="span12">
   
            <form class="">
                <label for="win-theme-select">Change theme:</label>
                <select id="win-theme-select" class="">
                    <option value="metro-ui-semilight">Semi-Light</option>
                    <option value="metro-ui-light">Light</option>
                    <option value="metro-ui-dark">Dark</option>
                </select>
            </form>
   
        </div>
        </div>
    </div>
   
</div>
